<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>06_列表渲染_过滤与排序</title>
  </head>
  <body>
    <!--
      1. 列表过滤
      2. 列表排序
      -->

    <div id="root">
      <!-- 收集表单数据：v-model -->
      <input type="text" v-model="searchName" />
      <ul>
        <li v-for="person in filterPersons" :key="person.id">
          {{person.id}} - {{person.name}} - {{person.age}}
        </li>
      </ul>
      <button @click="sort('asc')">年龄升序</button>
      <button @click="sort('desc')">年龄降序</button>
      <button @click="sort('origin')">原本顺序</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      /*
        data、methods、computed等数据都会直接挂载this上，
        意思是：可以直接通过this使用
        原理：数据代理：将data、methods、computed中数据直接挂载this上
        注意：在模板页面中使用vue数据，不能加this，默认会去this上找
      */
      new Vue({
        el: "#root",
        data: {
          searchName: "",
          persons: [
            { id: 1, name: "jack", age: 22 },
            { id: 2, name: "rose", age: 18 },
            { id: 3, name: "tom", age: 30 },
            { id: 4, name: "jerry", age: 24 },
            { id: 5, name: "xiaohua", age: 27 },
            { id: 6, name: "xiaohong", age: 15 },
            { id: 7, name: "xiaoming", age: 26 },
          ],
          orderType: "origin",
        },
        methods: {
          sort(orderType) {
            this.orderType = orderType;
          },
        },
        computed: {
          // 根据搜索内容进行过滤，返回一个新的数组
          filterPersons() {
            // 1. 获取要参与计算的数据
            const { persons, searchName, orderType } = this;
            // 2. 开始计算
            // 过滤
            const filterPersons = persons.filter((person) => {
              // 返回值true，代表保留到新数组
              // 返回值false，代表过滤
              // 如何判断person.name是否包含searchName呢？
              // indexOf 包含下标  不包含-1
              // return person.name.indexOf(searchName) > -1;
              // includes 包含true 不包含false
              return person.name.includes(searchName);
            });
            // 排序
            if (orderType === "origin") {
              return filterPersons;
            }

            const sortedPersons = filterPersons.sort((a, b) => {
              return orderType === "asc" ? a.age - b.age : b.age - a.age;
            });
            // 3. 返回计算结果
            return sortedPersons;
          },
        },
      });
    </script>
  </body>
</html>
